<div class="container" style="width:100%">
  <div class="row">
      <div class="card">
      <div class="card-header">
          <button class="btn btn-primary" (click)="addNews()">发布</button>
      </div>
  <div class="card-body">
  <table class="table table-striped">
      <thead>
        <tr>
            <th style="width:10%;text-align: center;">#</th>
            <th style="width:20%;text-align: center;">标题</th>
            <th style="width:10%;text-align: center;">作者</th>
            <th style="width:20%;text-align: center">发布时间</th>
            <th style="width:30%;text-align: center;">内容</th>
            <th style="width:30%;text-align: center;">封面</th>
            <th style="width:10%;text-align: center;">操作</th>
        </tr>
      </thead>
      <tbody>
          <tr *ngFor="let n of nl" >
              <td style="width:10%;height:50px;overflow:hidden;vertical-align:middle;">{{n.px}}</td>
              <td style="
              vertical-align:middle;
              ">{{n.title}}</td>
              <td style="width:10%;height:50px;overflow:hidden;vertical-align:middle;">{{n.author}}</td>
              <td style="width:20%;height:50px;overflow:hidden;vertical-align:middle;">{{n.pbdate | date:'yyyy-MM-dd HH:mm'}}</td>
              <td style="text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 4;
              -webkit-box-orient: vertical;
              "><div [innerHTML]="n.content | tohtml"></div></td>
               
               <td>
                 <img width="200px" height="200px"  src="{{HOST}}{{n.coverpic}}" *ngIf="n.coverpic" />
                 <input type="file" (change)="onFileChanged($event)">
               </td>

              <td style="width:10%;height:50px;">
              <button type="button" class="btn btn-success" (click)="editNews(n.newsid)">修改</button>
              <button type="button" class="btn btn-danger" (click)="deleteNews(n.newsid)">删除</button>
              <button type="button" class="btn btn-info" (click)="toDetail(n.newsid)">预览</button>
              <button type="button" class="btn btn-success" (click)="uploadNewsCover(n.newsid)">封面</button>  
            </td>
              </tr>
      </tbody>
    </table>
  </div>
  <div class="card-foot" style="margin-left: 40%;">
      <nav aria-label="Page navigation example">
          <ul class="pagination">
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
              </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item">
              <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
              </a>
            </li>
          </ul>
        </nav>
  </div>
</div>
</div>









</div>